<template>
	<view class="containerbox">
		<ranking_header centent-margin-top="-65" class="containerbox">
			<!-- <template #title>
				
			</template>
			
			<template #centent> -->
				<view class="containerbox">
					<uv-navbar :fixed="false" bgColor="transparent" leftIconSize="0"/>
					<view class="mx-30">
						<view class="text-white text-40">我的排名</view>
						<view class="text-white text-30 mt-10">
							<!-- <text class="mr-50">我的绩效：{{ sum }}</text>
							<text>当前排名：{{ infoData?.gradeRank || 0 }}</text> -->
							
							<text class="mr-50">我的绩效：0</text>
							<text>当前排名：0</text>
						</view>
					</view>
					<z-paging 
						ref="paging" 
						v-model="list" 
						@query="querylist" 
						class="containerbox" 
						:created-reload="false" 
						empty-view-text="暂无排名~" 
						:empty-view-img="`${$imageBaseUrl}default/ranking.svg`"
					>
						<!-- loding -->
						<template #loading>
							<dw_loading :status="loading" />
						</template>
						
						<!-- 列表 -->
						<view class="ranking_list bgc-white round-20 px-30 mx-30">
							<view 
								:class="['flex-between py-35', { 'border-bottom': list.length != index + 1 }]" 
								v-for="({ user, id, time }, index) in list" 
								:key="id"
							>
								<view class="flex-1 flex items-center">
									<view class="mr-20 ranking_index flex-center">
										<uv-image :src="`${$imageBaseUrl}ranking${index + 1}.png`" width="60rpx" height="60rpx" v-if="index < 3" />
										<text v-else class="text-35 text-qgray">{{ index < 10 ? `0${index}` : index }}</text>
									</view>
									
									<view class="ranking_avatar">
										<uv-image :src="user.portrait" width="58rpx" height="58rpx" shape="circle" />
									</view>
									
									<text class="ranking_name text-30 ml-15">{{ user.name }}</text>
								</view>
								
								<text class="text-qgray text-30">{{ time }} h</text>
							</view>
						</view>
					</z-paging>
				</view>
			<!-- </template> -->
		</ranking_header>
			
		<dw_tabbar :fiexd="true" />
	</view>
</template>


<script setup>
	
	import { ref , computed } from 'vue'
	import { imgPath } from '@/common/config'
	import { getRanklist } from '@/common/apis/other'
	import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app"
	import ranking_header from '@/pages/components/header'
	
	const paging = ref(null)
	const list = ref([])
	const loading = ref(false)
	const sum = ref(0)
	const infoData=computed(()=>{
		const { user } = uni.$store()
		console.log(user.userInfo)
		return user.userInfo
	})
	
	async function querylist(page, pageSize) {
		// const params = { page, pageSize, simplePage: 1 }
		// const result = await getRanklist(params)
		// console.log(result, 'result');
		// result.forEach(item=>{
		// 	sum.value+=Number(item.time) 
		// })
		// uni.$fui.sleep(() => loading.value = false)
		paging.value.complete([])
	}
	
</script>

<style scoped lang="scss">
	.ranking_index{width: 60rpx;height: 60rpx;font-weight: 600}
	.ranking_name{color: #3A3F5E}
	.ranking_avatar{width: 58rpx;height: 58rpx}
</style>